import axios from '../api'
import { watch } from 'vue'
import { useStore } from 'vuex'

interface IEcharts {
  [x: string]: any
}
declare const echarts : IEcharts;

interface IData {
  name: string
  value: number
}

interface IContainer {
  value: HTMLElement
}

export default function useSeller(container : IContainer) {
  let chart : any
  let data : Array<IData> = []
  let totalpage : number = 0
  let currentPage : number = 1
  let timeId : number
  const store = useStore()

  watch(() => store.state.theme, theme => {
    chart.dispose()  // 销毁原来的图表
    initChart()
    screenAdapter()
    updateChart()
  })

  // 初始化图表
  const initChart = () => {
    chart = echarts.init(container.value, store.state.theme)
    const initOption = {
      title: {
        text: '▎商家销售统计',
        top: 20,
        left: 20
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 鼠标移入 背景白条效果
          type: 'line',
          z: 0,
          lineStyle: {
            color: '#2D3443'
          }
        }
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '6%',
        bottom: '3%',
        containLabel: true // 定位包括坐标轴的文字
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category'
      },
      series: {
        type: 'bar',
        // 数值显示
				label: {
          show: true,
          position: 'right',
          textStyle: {
            color: 'white'
          }
        },
        // 控制柱的样式
        itemStyle: {
          // 圆角
          barBorderRadius: [0, 33, 33, 0],
          // 渐变颜色
          color: new echarts.graphic.LinearGradient(
            0,0,1,0, // 从左到右
            [
              {offset: 0, color: '#5052EE'},
              {offset: 1, color: '#AB6EE5'}
            ]
          )
        }
      }
    }
    // 绑定鼠标移入移出事件
    chart.on('mousemove', clear)
    chart.on('mouseout', setIntervalFn)
    chart.setOption(initOption)
  }

  // 获取数据
  const getData = res => {
    // const {data : res} = await axios.get('seller')
    // 计算总页数
    totalpage = Math.ceil(res.length / 5)
    // 获取数据 排序
    data = res.sort((a : any, b: any) => {
      return a.value - b.value
    })
    updateChart()
  }

  // 更新图表
  const updateChart = () => {
    const yData = data.slice((currentPage - 1) * 5, currentPage * 5).map(item => item.name)
    const xData = data.slice((currentPage - 1) * 5, currentPage * 5).map(item => item.value)
    const updateOption = {
      yAxis: {
        data: yData
      },
      series: {
        data: xData
      }
    }
    chart.setOption(updateOption)
  }

  // 启动定时
  const setIntervalFn = () => {
    timeId = setInterval(() => {
      currentPage += 1
      if(currentPage > totalpage) {
        currentPage = 1
      }
      updateChart()
    }, 3000);
  }

  // 关闭定时
  const clear = () => {
    clearInterval(timeId)
  }

  // 屏幕分辨率的适配
  const screenAdapter = () => {
    // console.log(container.value.offsetWidth)
    // 标题文字大小
    const titleFontSize = container.value.offsetWidth / 100 * 3.6
    // 和分辨率有关的配置项
    const adapterOption = {
      title: {
        textStyle: {
          fontSize: titleFontSize
        },
      },
      tooltip: {
        axisPointer: {
          lineStyle: {
            width: titleFontSize,
          }
        }
      },
      series: {
        // 柱宽
        barWidth: titleFontSize,
        // 控制柱的样式
        itemStyle: {
          // 圆角
          barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
        }
      }
    }
    // 为了改变图标
    chart.setOption(adapterOption)
    // 整个图标的自适应
    chart.resize()
  }

  return {
    initChart,
    getData,
    setIntervalFn,
    clear,
    screenAdapter
  }
}
